<extend name="Base/common"/>
<block name="body">
	<div class="span9 page_message">
		<section id="contents">
			<include file="Addons/_nav"/>
			<div class="tab-content">
				<h3>新建图文消息</h3>
				<!-- 表单 -->
				<div id="form" action="{$post_url}" class="form-horizontal form-center">
					<div class="material_form">
						<div class="preview_area">
							<if condition="empty($main)">
								<form data-index='0' class="appmsg_item edit_item editing">
									<p class="time">时间</p>

									<div class="main_img">
										<img src="__IMG__/no_cover_pic.png" data-coverid="0"/>
										<h6 class="title">这是标题</h6>
									</div>
									<p class="intro"></p>
									<input type="hidden" name="title" placeholder="这是标题"/>
									<input type="hidden" name="cover_id" value="0"/>
									<input type="hidden" name="intro" placeholder="这是摘要描述"/>
									<input type="hidden" name="author" placeholder="作者"/>
									<input type="hidden" name="link" placeholder="外链"/>
									<textarea style="display:none" name="content"></textarea>

									<div class="hover_area"><a href="javascript:;" onClick="editItem(this)">编辑</a></div>
								</form>
								<else/>
								<form data-index='0' class="appmsg_item edit_item editing">
									<p class="time">{$main.cTime|time_format}</p>

									<div class="main_img">
										<img src="{$main.cover_id|get_cover_url}"
										     data-coverid="{$main.cover_id|intval}"/>
										<h6 class="title">{$main.title}</h6>
									</div>
									<p class="intro">{$main.intro}</p>
									<input type="hidden" name="id" value="{$main.id}"/>
									<input type="hidden" name="title" value="{$main.title}"/>
									<input type="hidden" name="cover_id" value="{$main.cover_id}"/>
									<input type="hidden" name="intro" value="{$main.intro}"/>
									<input type="hidden" name="author" value="{$main.author}"/>
									<input type="hidden" name="link" value="{$main.link}"/>
									<textarea style="display:none" name="content">{$main.content}</textarea>

									<div class="hover_area"><a href="javascript:;" onClick="editItem(this)">编辑</a></div>
								</form>
								<volist name="others" id="vo">
									<form data-index='{$key+1}' class="appmsg_sub_item edit_item">
										<p class="title">{$vo.title}</p>

										<div class="main_img">
											<img src="{$vo.cover_id|get_cover_url}"
											     data-coverid="{$vo.cover_id|get_cover_url}"/>
										</div>
										<input type="hidden" name="id" value="{$vo.id}"/>
										<input type="hidden" name="title" value="{$vo.title}"/>
										<input type="hidden" name="cover_id" value="{$vo.cover_id}"/>
										<input type="hidden" name="intro" value="{$vo.intro}"/>
										<input type="hidden" name="author" value="{$vo.author}"/>
										<input type="hidden" name="link" value="{$vo.link}"/>
										<textarea style="display:none" name="content">{$vo.content}</textarea>

										<div class="hover_area"><a href="javascript:;" onClick="editItem(this)">编辑</a><a
												href="javascript:;" onClick="deleteItem(this)">删除</a></div>
									</form>
								</volist>
							</if>
							<div class="appmsg_edit_action">
								<a href="javascript:;" onClick="addMsg();">添加</a>
							</div>
						</div>
						<div class="edit_area">
							<em class="area_arrow"></em>

							<div class="">
								<ul class="tab-pane in appmsg_edit_group">
									<li class="form-item cf">
										<label class="item-label"><span class="need_flag">*</span>标题<span
												class="check-tips"></span></label>

										<div class="controls">
											<input type="text" class="text input-large" name="p_title" value="">
										</div>
									</li>
									<li class="form-item cf">
										<label class="item-label">作者<span class="check-tips"></span></label>

										<div class="controls">
											<input type="text" class="text input-large" name="p_author" value="">
										</div>
									</li>
									<li class="form-item cf">
										<label class="item-label"><span class="need_flag">*</span>封面图片<span
												class="check-tips">图片900X500</span></label>

										<div class="controls uploadrow2" title="点击修改图片" rel="p_cover">
											<input type="file" id="upload_picture_p_cover">
											<input type="hidden" name="p_cover" id="cover_id_p_cover"
											       data-callback="uploadImgCallback" value=""/>

											<div class="upload-img-box" rel="img" style="display:none">
												<div class="upload-pre-item2"><img width="100" height="100" src=""/>
												</div>
												<em class="edit_img_icon">&nbsp;</em>
											</div>
										</div>
									</li>
									<li class="form-item cf">
										<label class="item-label">摘要<span class="check-tips"></span></label>

										<div class="controls">
											<label class="textarea input-large">
												<textarea class="text input-large" name="p_intro"></textarea>
											</label>
										</div>
									</li>
									<li class="form-item cf">
										<label class="item-label"><span class="need_flag">*</span>正文<span
												class="check-tips"></span></label>

										<div class="controls">
											<label class="textarea">
												<textarea style="width:405px; height:200px;"
												          name="p_content"></textarea>
												{:hook('adminArticleEdit', array('name'=>'p_content','value'=>''))}
											</label>
											</label>
										</div>
									</li>
									<li class="form-item cf">
										<label class="item-label">外链<span class="check-tips"></span></label>

										<div class="controls">
											<input type="text" class="text input-large" name="p_link" value="">
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="form-item form_bh">
						<button class="btn submit-btn ajax-post" id="submit" type="button">{$submit_name|default='确
							定'}
						</button>
					</div>
				</div>
			</div>


		</section>
	</div>
</block>
<block name="script">
	<script type="text/javascript">
		$('#submit').click(function () {
			var postUrl = $('#form').attr('action');
			var dataJson = [];
			$('.edit_item').each(function (index, element) {
				dataJson.push($(this).serializeArray());
			});
			$(this).addClass('disabled');
			//console.log(dataJson);
			//console.log(JSON.stringify(dataJson));
			//提交数组字符串 php解析后进行保存
			$.post(postUrl, {'dataStr': JSON.stringify(dataJson)}, function (data) {
				$('#submit').removeClass('disabled');
				if (data.status == 1) {
					updateAlert(data.info, 'success');
					setTimeout(function () {
						location.href = data.url;
					}, 1500);
				} else {
					updateAlert(data.info);
				}
			})
			return false;
		});
		$(function () {
			//初始化上传图片插件
			initUploadImg();

			showTab();

			$('.toggle-data').each(function () {
				var data = $(this).attr('toggle-data');
				if (data == '') return true;

				if ($(this).is(":selected") || $(this).is(":checked")) {
					change_event(this)
				}
			});

			$('select').change(function () {
				$('.toggle-data').each(function () {
					var data = $(this).attr('toggle-data');
					if (data == '') return true;

					if ($(this).is(":selected") || $(this).is(":checked")) {
						change_event(this)
					}
				});
			});

			//动态预览
			$('input[name="p_title"]').keyup(function () {
				$('.editing').find('.title').text($(this).val());
				$('.editing').find('input[name="title"]').val($(this).val());
			});
			$('input[name="p_author"]').keyup(function () {
				$('.editing').find('.author').text($(this).val());
				$('.editing').find('input[name="author"]').val($(this).val());
			});
			$('input[name="p_link"]').keyup(function () {
				$('.editing').find('.link').text($(this).val());
				$('.editing').find('input[name="link"]').val($(this).val());
			});
			$('textarea[name="p_intro"]').keyup(function () {
				$('.editing').find('.intro').text($(this).val());
				$('.editing').find('input[name="intro"]').val($(this).val());
			});
			imageEditor.addListener("contentChange", function () {
				$('.editing').find('textarea[name="content"]').val(imageEditor.getContent());
			});
			imageEditor.addListener("ready", function () {
				initForm($('.edit_item').eq(0));
			});


		});
		function addMsg() {
			var curCount = $('.edit_item').size();
			if (curCount >= 8) {
				updateAlert('你最多只可以增加8条图文信息');
				return false;
			}
			//console.log(curCount);
			var addHtml = $('<form data-index="' + curCount + '" class="appmsg_sub_item edit_item">' +
			'<p class="title"></p>' +
			'<div class="main_img">' +
			'<img src="__IMG__/no_cover_pic_s.png" data-coverid="0"/>' +
			'</div>' +
			'<input type="hidden" name="title" placeholder="这是标题"/>' +
			'<input type="hidden" name="cover_id" value="0"/>' +
			'<input type="hidden" name="intro" placeholder="这是摘要描述"/>' +
			'<input type="hidden" name="author" placeholder="作者"/>' +
			'<input type="hidden" name="link" placeholder="外链"/>' +
			'<textarea style="display:none" name="content"></textarea>' +
			'<div class="hover_area"><a href="javascript:;" onClick="editItem(this)">编辑</a><a href="javascript:;" onClick="deleteItem(this)">删除</a></div>' +
			'</form>');
			addHtml.insertBefore($('.appmsg_edit_action'));
		}
		function editItem(_this) {
			$(_this).parents('.edit_item').addClass('editing');
			$(_this).parents('.edit_item').siblings().removeClass('editing');
			var index = $(_this).parents('.edit_item').data('index');
			if (index == 0) {
				$('.edit_area').css('margin-top', 0);
			} else {
				$('.edit_area').css('margin-top', index * 110 + 120);
			}
			initForm($(_this).parents('.edit_item'));
		}
		function deleteItem(_this) {
			if (!confirm('确认删除？')) return false;

			var item_id = $(_this).parents('.edit_item').find('input[name="id"]').val();
			if (item_id) {
				$.post("{:U('del_material_by_id')}", {id: item_id});
			}

			$(_this).parents('.edit_item').remove();
			var curCount = $('.edit_item').size();
			if (curCount == 1) {
				$('.edit_area').css('margin-top', 0);
			} else {
				$('.edit_area').css('margin-top', (curCount - 1) * 110 + 120);
			}
			initForm($('.edit_item').eq(curCount - 1));
		}
		function uploadImgCallback(name, id, src) {
			$('.editing img').attr('src', src);
			$('.editing input[name="cover_id"]').val(id);
		}
		function initForm(_item) {
			var title = $(_item).find('input[name="title"]').val();
			var author = $(_item).find('input[name="author"]').val();
			var link = $(_item).find('input[name="link"]').val();
			var intro = $(_item).find('input[name="intro"]').val();
			var content = $(_item).find('textarea[name="content"]').val();
			var src = $(_item).find('img').attr('src');
			$('input[name="p_title"]').val(title);
			$('input[name="p_author"]').val(author);
			$('input[name="p_link"]').val(link);
			$('textarea[name="p_intro"]').val(intro);
			if (!content)content = " ";
			if (content) {
				imageEditor.setContent(content);
			}
			$('.upload-img-box').show().find('img').attr('src', src);
		}
	</script>
</block>